<template>
  <div>
    <van-nav-bar fixed placeholder>
      <template #left>
        <van-icon @click="gotoback" name="arrow-left" color="#333" size="18" />
      </template>
      <template #right>
        <van-search
          v-model="value"
          shape="round"
          right-icon="photograph"
          placeholder="请输入搜索关键词"
        /><span @click="searchs()">搜索</span>
      </template>
    </van-nav-bar>
    <div>
      <h3>热搜</h3>
      <div class="brief">
        <div
          class="briefs"
          v-for="(item, index) in brief"
          :key="index"
          @click="logoDetail(item, index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div v-if="isLoad">
      <van-skeleton title :row="5" />
    </div>
    <div v-else>
      <div class="lists">
        <div
          v-for="(item, index) in searchList"
          :key="index"
          class="miniStreamViews"
          @click="goToInfo(item.goods_id)"
        >
          <van-image
            class="img"
            fit="contain"
            v-lazy
            :src="url + item.original_img"
          />
          <div class="text-warps" :title="item.goods_name">
            {{ item.goods_name }}
          </div>
          <div class="prices">${{ item.market_price }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      value: "",
      brief: [],
      isLoad: true,
      searchList: [],
      url: "https://img.9lele.com",
    };
  },
  computed: {
    ...mapGetters(["search"]),
  },
  methods: {
    goToInfo(id) {
      this.$router.push({ path: "/info", query: { id: id } });
    },
    gotoback() {
      this.$router.go(-1);
    },
    searchs() {
      this.$store.dispatch("apple/Search", this.value).then((e) => {
        console.log(this.value);
        this.searchList = e.data.data;
        console.log(30, this.searchList);
        if (this.value !== "") {
          let val = this.value.trim();
          if (!val) {
            return;
          }
          if (this.brief.indexOf(val) === -1) {
            this.brief.unshift(val);
            this.brief = this.brief.slice(0, 10);
            localStorage.setItem("history", JSON.stringify(this.brief));
          }
        }
      });
    },
  },
  mounted() {
    if (JSON.parse(localStorage.getItem("history"))) {
      this.brief = JSON.parse(localStorage.getItem("history"));
    }
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      500
    );
  },
};
</script>

<style>
.van-nav-bar .van-icon {
  color: #333 !important;
}
.brief {
  width: 100%;
  /* height: 6vh; */
  /* background-color: aqua; */
  display: flex;
  flex-wrap: wrap;
}
.briefs {
  font-size: 0.28rem;
  padding: 0.8vh 4%;
  margin: 1vh 3% 1vh 0;
  background-color: #f4f4f4;
  border-radius: 50px;
}
.lists {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.miniStreamViews {
  width: 44%;
  height: 15rem;
  /* height: 20vh; */
  background-color: #fff;
  border-radius: 10px;
  margin: 0 3%;
  margin-top: 2%;
}
::-webkit-scrollbar {
  width: 0px;
}
.text-warps {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  margin-left: 3%;
  font-size: 1.1rem;
}
.img {
  width: 100%;
  height: 80%;
}
.prices {
  text-align: left;
  margin-left: 3%;
  color: rgba(255, 38, 0, 0.575);
}
</style>